
<meta charset="UTF-8"/>
<style type="text/css">
	.plusimg{
		width: 35px;
		height: 35px;
		border-radius: 30px;
		background-color:yellowgreen;
		color: black;
	}
	.wordimage{
		text-decoration: none;
		margin-right: 10px;
	}
	.uull{
		padding:16px 15px;
	}
	.uull li{
		margin-left: 10px;
	}
</style>
<div id="before" style="margin-top:20px;margin-left: 5px;">
	<ul style="list-style: none;" class="uull">
		<li style="display:inline-block;">
			<a href="" class="wordimage"><img class="plusimg" style="background-color:#9ACD32;" src="meicons/plus_scan.png"/><br><span style="margin-left: -7px;">扫一扫</span></a>
		</li>
		<li onclick="showhide()" style="display:inline-block;position: absolute;right: 2px;">
			<a href="" class="wordimage"><img class="plusimg" src="meicons/login_back_.png"/></a>
		</li>

	</ul>
	
	<ul style="list-style: none;" class="uull">
		
		<li style="display:inline-block;">
			<a href="" class="wordimage"><img class="plusimg" style="background-color:#444444;" src="meicons/plus_voice.png"/><br><span style="margin-left: 5px;">录音</span></a>
		</li>
		<li style="display:inline-block;">
			<a href="" class="wordimage"><img class="plusimg" style="background-color:lightcoral;" src="meicons/plus_word.png"/><br><span style="margin-left: 3px;">文字</span></a>
		</li>
	</ul>
	<ul style="list-style: none;" class="uull">
		<li style="display:inline-block;">
			<a href="" class="wordimage"><img class="plusimg" style="background-color:brown;" src="meicons/plus_camera.png"/><br><span style="margin-left: 3px;">拍照</span></a>
		</li>
		<li style="display:inline-block;">
			<a href="" class="wordimage"><img class="plusimg" style="background-color:darksalmon;" src="meicons/plus_picture.png"/><br><span style="margin-left: 5px;">相册</span></a>
		</li>
		<li style="display:inline-block;">
			<a href="" class="wordimage"><img class="plusimg" style="background-color:goldenrod;" src="meicons/plus_note.png"/><br><span style="margin-left: 3px;">便签</span></a>
		</li>
	</ul>
	
	
</div>